//免费听书馆

import 'package:beautyflutter/componts/base_cared.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CardFree extends BaseCard {

  @override
  _CardFreeState createState() => _CardFreeState();
}
const book_list = [
  {'title': '暴力沟通', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '29.5'},
  {'title': '论中国', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '59.0'},
  {'title': '饥饿的盛世.乾隆时代的得与失', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '20.5'},
  {'title': '我就是风口', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '39.5'},
  {'title': '大宋的智慧', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '39.5'},
  {'title': '人性的弱点', 'cover': 'https://gitee.com/CASE_CAI/img/raw/master/shengdoushixingshi.jpg', 'price': '19.5'}
];
class _CardFreeState extends BaseCardState {
  @override
  topTitle(String title) {
    return super.topTitle('免费听书馆');
  }
  Widget subTitle (String title) {
    return super.subTitle('第 108 期');
  }
  @override
  bottomContent() {
    return Expanded(child: Container(
      margin: EdgeInsets.only(top: 20),
      child: Column(
        children: <Widget>[
          //撑开高度
          Expanded(child: _bookList()),
          Padding(
            padding: EdgeInsets.only(bottom: 20),
            child: _bottomButton())
        ],
      ),
    ));
  }

  _bookList() {
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 15,//水平间距
      mainAxisSpacing: 10,//垂直间距
      childAspectRatio: 0.48, //长宽比
      padding: EdgeInsets.only(left: 20, right: 20),
      children: book_list.map((item) {
        return _item(item);
      }).toList(),
    );
  }

  Widget _bottomButton() {
    return FractionallySizedBox(
      widthFactor: 1,
      child: Padding(
        padding: EdgeInsets.only(left: 20, right: 20),
        child: RaisedButton(
          onPressed: () {
            print('领取=====');
          },
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20)
          ),
          padding: EdgeInsets.only(top: 15, bottom: 15),
          color: Colors.blueAccent,
          child: Text('免费领取', style: TextStyle(color: Colors.white)),
        ),
      )
    );
  }

  Widget _item(Map<String, String> item) {
    return Container(
      child: Column(
        children: <Widget>[
          //绝对布局
          Stack(
            alignment: AlignmentDirectional.center,
            children: <Widget>[
              Image.network(
                item['cover'],
                fit: BoxFit.cover,
              ),
              Container(
                width: 30,
                height: 30,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.black38
                ),
                child: Icon(Icons.play_arrow, color: Colors.white),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(
                    color: Colors.black54,
                  ),
                  child: Text('原价${item['price']}', style: TextStyle(color: Colors.white, fontSize: 10)),
                ),
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
            child: Text(
              item['title'],
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            )
          )
        ],
      ),
    );
  }
}